<template>
  <div>
    <el-form
      ref="searchForm"
      class="searchForm"
      :model="searchForm"
      label-width="50"
    >
      <el-row :gutter="12">
        <!--        合计24份  -->
        <el-col :span="6">
          <el-form-item prop="queryCondition.leaveId" label="ID">
            <el-input v-model.trim="searchForm.queryCondition.leaveId">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.applierSimilar" label="申请人">
            <el-input v-model="searchForm.queryCondition.applierSimilar">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.applyTimeStart" label="最小值">
            <el-date-picker v-model="searchForm.queryCondition.applyTimeStart">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.applyTimeEnd" label="最大值">
            <el-date-picker v-model="searchForm.queryCondition.applyTimeEnd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item prop="queryCondition.leaveTypes" label="请假类型">
            <el-checkbox-group v-model="searchForm.queryCondition.leaveTypes">
              <el-checkbox
                v-for="(e, i) in leaveTypes"
                :key="i"
                :label="e.value"
                border=""
                >{{ e.text }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="queryCondition.auditStates" label="审核状态">
            <el-checkbox-group v-model="searchForm.queryCondition.auditStates">
              <el-checkbox
                v-for="(e, i) in auditStates"
                :key="i"
                :label="e.value"
                border=""
                >{{ e.text }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="queryByCondition(1)"
          >查询</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.searchForm.resetFields()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!--
          /* results 泛型
        * {
            leaveId: 34,
            leaveType: "sickLeave",
            reason: "ok再次修改开发太忙了请假",
            applier: "anonymous007",
            applyState: "submitted",
            applyTime: "2021-07-28T14:45:28.56",
            auditState: "notAudit",
            auditor: null,
          },
        *
        * */-->
    <el-table :data="results" class="resultsTable" stripe>
      <el-table-column prop="leaveId" label="ID" width="60"></el-table-column>
      <el-table-column
        label="请假原因"
        :formatter="reasonFormat"
      ></el-table-column>
      <el-table-column prop="applier" label="申请人"></el-table-column>

      <el-table-column label="请假类型" :formatter="leaveTypeFormat">
      </el-table-column>
      <el-table-column label="请假类型" :formatter="auditStateFormat">
      </el-table-column>
      <el-table-column label="申请时间" :formatter="applyTimeFormat">
      </el-table-column>
      <el-table-column width="120" fixed="left">
        <template slot-scope="props">
          <el-button
            class="el-button--mini"
            type="warning"
            icon="el-icon-edit"
            @click="openById(props.row.leaveId)"
            >审核</el-button
          >
          <!--          <el-button-->
          <!--            class="el-button&#45;&#45;mini"-->
          <!--            type="danger"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="deleteById(props.row.leaveId)"-->
          <!--            >删除</el-button-->
          <!--          >-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>

    <modify-leave-audit ref="auditDialog" @afterAudit="queryByCondition"></modify-leave-audit>
    <el-button @click="test01">go</el-button>
  </div>
</template>

<script>
// import New from './components/New.vue';
import { mapState } from "vuex";
import ModifyLeaveAudit from "@/components/ModifyLeaveAudit";
import {leaveModuleApi} from "@/api/apis"
export default {
  name: "LeaveAudit",
  components: {
    ModifyLeaveAudit,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      searchForm: {
        pageNum: 1,
        pageSize: 8,
        queryCondition: {
          leaveId: null,
          applierSimilar: null,
          applyTimeEnd: null,
          applyTimeStart: null,
          auditStates: [],
          leaveTypes: [],
        },
      },

      total: 0,

      results: [],
    };
  },
  computed: {
    ...mapState(["leaveTypes", "auditStates", "applyStates"]),
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    sampleM() {},
    queryByCondition(pageNum) {
      if (pageNum) this.searchForm.pageNum = pageNum;
      // this.$http({
      //   method: "post",
      //   url: "/leaveAbout/leave/query/audit",
      //   data: this.searchForm,
      // })
      leaveModuleApi.leaveQueryAuditApi(this.searchForm)
      .then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
          // this.$message.info(`total : ${this.total}`);
        },
        (error) => {
          this.$message.warning("query mistake：" + error.response.status);
        }
      );
    },
    leaveTypeFormat(row) {
      return this.leaveTypes.find((x) => x.value === row.leaveType);
    },
    applyTimeFormat(row) {
      return row.applyTime.substr(0, 10);
    },
    auditStateFormat(row) {
      return this.auditStates.find((x) => x.value === row.auditState);
    },
    reasonFormat(row) {
      let str = row.reason;
      if (str.length < 8) {
        return str;
      } else {
        return str.substr(0, 8) + "...";
      }
    },
    openById(id) {
      // this.$http({
      //   method: "get",
      //   url: `/leaveAbout/leave/audit/${id}`,
      // })
      console.log(1)
      leaveModuleApi.leaveGetAuditApi(id)
      .then(
        (res) => {
          this.$refs.auditDialog.openToModify(res.data);
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },

   //       15 50    10 30
   // A商品 25  18  2
    test01(){
      this.$http({
              method: "put",
              url: "http://localhost:9091/testing/test01",
            }).then(
              (res) => {
                console.log(res.data)
              },
              (error) => {
                console.log(" request error : "+error.response.status);
              }
            );
    }
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
</style>
